<!--
 * @Author: liaoxing
 * @Date: 2021-08-18 09:41:39
 * @LastEditors: liaoxing
 * @LastEditTime: 2021-08-29 14:30:55
 * @Description: file content
 * @FilePath: \数据中心\src\views\home\BoardPage\AlarmBoard\charts\pieCharts.vue
-->
<script>
const echarts = require('echarts')

export default {
  components: {},
  props: {
    dataList: {
      type: Object,
      default: () => {
        return {
          value: 66,
          name: '状态',
          color: '#FF0C0C'
        }
      }
    }
  },
  data(){
    return {
      currentNav: '',
      color: ['#46e70b', '#ff690c', '#30ccfb', '#09c49a', '#ffa40c', '#f26f5e',  "#297af2", "#ffa916", "#15f1c6", "#4f32f3"],
      myChart: null
    }
  },
  watch: {
    dataList () {
      this.getOption()
    }
  },
  mounted(){
    this.myChart = echarts.init(this.$refs.charDom)
    this.getOption()
  },
  methods: {
    getOption () {
      this.myChart.setOption({
        series: [{
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          pointer: {
              show: false
          },
          progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                  borderWidth: 0,
                  color: this.dataList.color
              }
          },
          axisLine: {
              lineStyle: {
                  width: 7,
                  color: [[1, '#05285D']]
              }
          },
          splitLine: {
              show: false,
          },
          axisTick: {
              show: false
          },
          axisLabel: {
              show: false,
          },
          data: [{
              value: this.dataList.value,
              name: this.dataList.name,
              title: {
                  offsetCenter: ['0%', '20%']
              },
              detail: {
                  offsetCenter: ['0%', '-20%']
              }
          }
          ],
          title: {
              fontSize: 14,
              color: '#fff'
          },
          detail: {
              // width: 50,
              // height: 14,
              fontSize: 18,
              color: this.dataList.color,
              borderColor: 'auto',
              borderRadius: 20,
              formatter: '{value}' + this.dataList.unit
          }
        }]
      })
    }
  },
  render(){
    return <div style='width:100%;height:100%;'>
      <div ref='charDom' style='width:100%;height:100%;'></div>
    </div>
  }
}
</script>

<style scoped lang='less'>
</style>
